<!-- 查看物流弹窗 -->
<template>
	<uni-popup ref="logisticsPopup" type="center" :mask-click="false">
		<view class="logistics-container">
			<view class="header">查看物流</view>
			<uni-icons class="logistics-close" type="closeempty" @click="closePopup" size="20"></uni-icons>
			<view class="content">
				<!-- 商品信息区 -->
				<view class="goods-heith">
					<view class="goods-info">
						<!-- <image src="/static/carousel04.png" mode="aspectFill" class="goods-img"></image> -->
						<image :src="orderDataObj.goods.cartList[0].goods_image?
						orderDataObj.goods.cartList[0].goods_image:orderDataObj.goods.cartList[0].param.image" mode="aspectFill"
							class="goods-img"></image>
						<view class="delivery-detail">
							<text>{{orderDataObj.delivery.title}}</text>
							<text>订单号：{{orderDataObj.order_no}}</text>
							<text>运单号：{{orderDataObj.delivery.number}}</text>
							<text>发货时间：{{msToDateTime(orderDataObj.delivery.create_date)}}</text>
						</view>
					</view>
				</view>

				<view class="timeline">
					<!-- <uni-steps :options="list2" active-color="#007AFF" :active="active" direction="column" /> -->
					<wo-timeline class="woTimeline" :options="timelineItems"></wo-timeline>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	const global = uniCloud.importObject('global')
	export default {
		name: "logisticsPopup",
		data() {
			return {
				// 物流数据（可从接口获取，此处模拟）
				logistics: {
					delivery: {
						method: '京东快递',
						carrier: '京东快递',
						waybill: 'JD0186349628883'
					}
				},
				timelineItems: [
					// {
					// 	axisPoint: "2025-04-24 09:46:28",
					// 	title: "运输中",
					// 	content: "您的订单已离开菏泽分拣中心，前往菏泽定陶营业部途中",
					// 	expanded: false,
					// },
					// {
					// 	axisPoint: "2025-04-24 09:46:28",
					// 	title: "",
					// 	content: "您的订单在京东【德州齐河散货分拣中心】分拣完成",
					// 	expanded: false,
					// }
				],
				orderDataObj: {}, // 传过来的商品信息
			};
		},
		props: {
			// orderDataObj: {
			// 	type: Object, // 数字类型
			// 	required: false, // 必填项
			// 	default: null // 默认值
			// },
		},
		mounted() {},
		// mounted() {
		// 	// 实际项目中应根据订单ID从服务器获取详情
		// 	console.log('传入的订单详情数据：', this.orderData);
		// 	this.orderDetail = JSON.parse(JSON.stringify(this.orderData))
		// },
		methods: {
			openPopup(item) {
				this.$refs.logisticsPopup.open();
				console.log('查看物流2：', item)
				this.orderDataObj = item;
				global.getWuliu(item.delivery.com,item.delivery.number).then((data)=>{
					console.log('返回的物流信息：',data);
					this.timelineItems = data.data.result.data;
				}).catch((err)=>{
					uni.showToast({
						title: '物流信息查询错误',
						icon: 'none'
					})
					console.log("查询错误：",err);
				})
			},
			closePopup() {
				this.$refs.logisticsPopup.close();
			},
			msToDateTime(input) {
				const date = new Date(input); // 初始化Date对象，支持毫秒数或ISO格式字符串
				if (isNaN(date.getTime())) { // 检查日期是否有效
					throw new Error('无效的时间输入，请提供毫秒数或ISO格式时间字符串');
				}
				const padZero = (num) => num.toString().padStart(2, '0'); //补零函数：确保月份/日期/时分秒为两位数（如1→01）

				const year = date.getFullYear();
				const month = padZero(date.getMonth() + 1);
				const day = padZero(date.getDate());
				const hour = padZero(date.getHours());
				const minute = padZero(date.getMinutes());
				const second = padZero(date.getSeconds());

				// 4. 拼接格式
				return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
			},
		}
	}
</script>

<style scoped>
	.logistics-container {
		width: 1073px;
		/* padding: 0 20px 20px; */
		background: #fff;
		border-radius: 16px;
		position: relative;
	}

	.logistics-close {
		position: absolute;
		top: 8px;
		right: 10px;
	}

	.header {
		font-size: 14px;
		font-weight: 600;
		text-align: left;
		height: 40px;
		line-height: 40px;
		background-color: #EBEBEB;
		padding: 0 20px;
		border-radius: 16px 16px 0 0;
	}

	.content {
		display: flex;
	}

	.goods-heith {
		display: flex;
		padding: 20px;
	}

	.goods-info {
		width: 310px;
		height: 110px;
		display: flex;
		align-items: start;
		/* margin-bottom: 20px; */
		border: 1px solid #eee;
		padding: 10px;
		margin: 30px auto;
		border-radius: 8px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.goods-img {
		width: 100px;
		height: 100px;
		margin-right: 15px;
	}

	.delivery-detail text {
		display: block;
		margin-bottom: 10px;
		font-size: 12px;
		color: #666;
	}

	.delivery-detail text:nth-child(1) {
		display: block;
		font-weight: 600;
	}


	.timeline {
		width: 630px;
		height: 550px;
		overflow-y: auto;
		margin: 20px;
	}

	.woTimeline {
		width: 600px;
		height: 550px;
	}

	.woTimeline /deep/ .flex-center {
		display: none;
	}

	.woTimeline /deep/ .timeline__title {
		color: #666;
		font-size: 14px;
	}

	.woTimeline /deep/ .timeline__item {
		padding-bottom: 0;
	}

	.woTimeline /deep/ .timeline__dot {
		background-color: #999;
	}

	.woTimeline /deep/ .timeline__item:not(:last-child):before {
		background-color: #999;
	}
</style>